<template>
  <div class="shortcuts-card">
    <template v-for="(item,index) in menus" :key="item.id">
      <div class="menu"  v-if="index!==0">
      <div class="left">
        <img class="img" :src="require(`@/assets/svg/aside2/${item.name}.svg`)" alt="" />
      </div>
      <div class="right">
        <div class="menu-item" v-for="subItem in item.children" :key="subItem.id" @click="goto(subItem)">
          <img class="img" :src="require(`@/assets/svg/aside/item/${subItem.name}.svg`)" alt="" />
          <span>{{ subItem.name }}</span>
        </div>
      </div>
    </div>
    </template>

  </div>
</template>

<script setup>
import { useStore } from 'vuex'
import { computed } from 'vue'
import { useRouter } from 'vue-router';

const router = useRouter()
const store = useStore()
const menus = computed(() => store.state.userModule.userMenus)


// 跳转
const goto = (menu) => {
  router.push({
    path: menu.path ?? '/not-found'
  })
}

</script>

<style lang="less" scoped>
.shortcuts-card {
  width: 100%;
  height: 100%;
  .menu {
    width: 100%;
    height: 80px;
    display: flex;
    border-bottom: 1px solid #e5e6eb;
    .left {
      display: flex;
      height: 100%;
      padding: 0 25px;
      border-right: 1px solid #e5e6eb;
      .img {
        width: 35px;
      }
    }
    .right {
      display: flex;
      .menu-item {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 30px;
        cursor: pointer;
        transition: 0.3s all;
        .img {
          width: 26px;
        }
        span {
          padding-top: 10px;
          font-size: 12px;
        }
      }
      .menu-item:hover {
        box-shadow: 0 1px 7px rgba(77, 79, 81, 0.17);
      }
    }
  }
  .menu:last-child {
    border-bottom: none;
  }
}
</style>
